<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
  <div v-for="item in bookInfo" :key="item.id">
    <h3 :style="{color:item.color}">{{item.type}}</h3>
    <div v-for="info in item.list" :key="info.id">
      <p>《{{info.bookName}}》-----{{info.author}}</p>
    </div>
    <hr/>
  </div>
</div>
</body>
<script>
  new Vue({
    el: "#root",
    data:{
      bookInfo:[
        {
          id:100,
          color:"green",
          type:"武侠小说",
          list:[
            {
              id:1,
              bookName:"天龙八部",
              author:"金庸"
            },
            {
              id:2,
              bookName:"圆月弯刀",
              author:"古龙"
            }
          ]
        },
        {
          id:200,
          type:"玄幻",
          color:"skyblue",
          list:[
            {
              id:12,
              bookName: "斗破苍穹",
              author:"天蚕土豆"
            },{
              id:13,
              bookName: "斗罗大陆",
              author: "唐家三少"
            }
          ]
        }
      ]
    }
  })
</script>
</html>